{#
 # ---------------------------------------------------------------------
 #
 # GLPI - Gestionnaire Libre de Parc Informatique
 #
 # http://glpi-project.org
 #
 # @copyright 2015-2025 Teclib' and contributors.
 # @licence   https://www.gnu.org/licenses/gpl-3.0.html
 #
 # ---------------------------------------------------------------------
 #
 # LICENSE
 #
 # This file is part of GLPI.
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
 # the Free Software Foundation, either version 3 of the License, or
 # (at your option) any later version.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU General Public License
 # along with this program.  If not, see <https://www.gnu.org/licenses/>.
 #
 # ---------------------------------------------------------------------
 #}

{% import 'components/form/fields_macros.html.twig' as fields %}
{% set rand = random() %}
{% set field_name = field_name|default('psgallery' ~ rand) %}

{% set imgs = imgs|default({}) %}
{% set galleryclass = gallery_class|default('') %}
{% set gallery_type = gallery_type|default('') %}
{% set gallery_item_class = gallery_item_class|default('') %}

{% if gallery_type == 'horizontal' %}
   <div class="col-12">
      <div class="d-flex flex-row overflow-auto pswp-horizontal-gallery pswp-img{{ rand }} {{ gallery_item_class }}" itemscope itemtype="https://schema.org/ImageGallery">
         {% for img in imgs %}
            <div class="{{ img['gallery_item_class']|default('') }}">
            {% if img['pre_figure_content'] is defined %}
               {{ img['pre_figure_content']|raw }}
            {% endif %}
            <figure itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject" class="d-flex flex-column me-2">
                  {% if img['_video'] ?? false %}
                     <span class="bg-black pswp-trigger pointer d-flex justify-content-center align-items-center">
                        <i class="ti ti-video-filled"></i>
                     </span>
                  {% else %}
                     <a href="{{ img['src']|escape }}" itemprop="contentUrl" data-index="0">
                        <img src="{{ img['thumbnail_src']|default(img['src']) }}"
                             itemprop="thumbnail" alt="{{ img['title']|default('') }}"
                             class="{{ img['img_class']|default('') }} pointer pswp-trigger" />
                     </a>
                  {% endif %}
               <figcaption itemprop="caption description" class="text-muted fst-italic">
                  {{ img['title']|default('') }}
               </figcaption>
            </figure>
            {% if img['post_figure_content'] %}
               {{ img['post_figure_content']|raw }}
            {% endif %}
         </div>
         {% endfor %}
      </div>
   </div>
{% else %}
   <div class="pswp-img{{ rand }} {{ gallery_item_class }}" itemscope itemtype="https://schema.org/ImageGallery">
      {% for img in imgs %}
         {% set clearable = img['clearable'] %}
         <figure itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject"
                 style="width: {{ img['thumbnail_w']|default('auto') }}; height: {{ img['thumbnail_h']|default('auto') }}">
            {{ fields.imageField(
                  (clearable ? 'pictures' : field_name) ~ '_' ~ loop.index0,
                  img['thumbnail_src']|default(img['src']),
                  '',
                  {
                     'no_label': true,
                     'full_width': true,
                     'mb': '',
                     'clearable': clearable,
                     'class': 'cursor-pointer pswp-trigger',
                     'alt': img['title']|default(''),
                     'itemprop': 'thumbnail'
                  },
                  {
                     'itemprop': 'contentUrl',
                     'data-index': '0'
                  }
            ) }}
            <figcaption itemprop="caption description" class="text-muted fst-italic">
               {{ img['title']|default('') }}
            </figcaption>
         </figure>
      {% endfor %}
   </div>
{% endif %}

<script>
   (($) => {
      $(".pswp-img{{ rand }}").on('click', 'figure .pswp-trigger', function(event) {
         event.preventDefault();
         const options = {
            bgOpacity: 0.7,
            dataSource: {{ imgs|json_encode|raw }},
            index: $(this).closest('figure').parent().index(),

            close: {{ controls is defined ? controls.close|json_encode() : 'false' }},
            zoom: {{ controls is defined ? controls.zoom|json_encode() : 'false' }},

            arrowNextTitle: __('Next (arrow right)'),
            arrowPrevTitle: __('Previous (arrow left)'),
            closeTitle: __('Close (Esc)'),
            downloadTitle: __('Download'),
            zoomTitle: __('Zoom in/out'),
         };
         const gallery = new PhotoSwipe(options);
         gallery.on(
            'uiRegister',
            function () {
               this.ui.registerElement({
                  name: 'download',
                  isButton: true,
                  html: '<a class="text-white" target="_blank" download=""><i class="fa-solid fa-download"></i></a>',
                  order: 8,
                  onInit: (el, pswp) => {
                     pswp.on('change', () => {
                        el.getElementsByTagName('a')[0].href = pswp.currSlide.data.src;
                     });
                  }
               });
            }
         );
         gallery.init();
      })
   })(jQuery);
</script>
